.g-main{
  height: 0;
  display: flex;
  flex-direction: column;
}
.list-wrap{
  flex: 1;
  height: 0;
  .li-wrap{
    margin-top: 20rpx;
    .li-top{
      display: flex;
      justify-content: space-between;
      padding: 20rpx 20rpx 0;
      background: #ffffff;
      .top-left{
        display: flex;
        .user-photo{
          width: 82rpx;
          height: 82rpx;
          background: #3686c6;
          -webkit-border-radius: 6rpx;
          -moz-border-radius: 6rpx;
          border-radius: 6rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          font-size: 60rpx;
          margin-right: 8rpx;
        }
        .user-name{
          color: #101010;
          font-weight: bold;
          font-size: 28rpx;
        }
        .follow-time{
          color: #6C6C6C;
          font-size: 24rpx;
        }
      }
      .top-right{
        .follow-type{
          color: #6C6C6C;
          font-size: 24rpx;
        }
      }
    }
    .li-mid{
      padding: 0 20rpx;
      background: #ffffff;
      .follow-content{
        color: #101010;
        font-size: 24rpx;
        padding: 20rpx 0;
      }

      .follow-btn{
        text-align: right;
        & > view{
          color: #9A9A9A;
          font-size: 24rpx;
          display: inline-block;
          padding: 0 10rpx;
        }
      }

      .follow-approve,.follow-reply{

        > .list{
          background: #f6f7fb;
          border-radius: 8rpx;
          padding: 20rpx;

        }
        .item{
          display: flex;
          color: #6C6C6C;
          &+.item{
            margin-top: 20rpx;
          }

          > .iconfont{
            margin-top: 5rpx;
          }

          .item-main{
            font-size: 24rpx;
            margin-left: 10rpx;
            flex: 1;
            .item-top{
              display: flex;
              justify-content: space-between;
              .top-left{
                display: flex;
                margin-bottom: 5rpx;
              }
              .top-right{
                display: flex;
                & > view{
                  color: #9A9A9A;
                  font-size: 24rpx;
                  padding: 0 10rpx;
                  text-decoration: underline;
                  &.del{
                    color: #ff5757;
                  }
                  &.edit{
                    color: #2d6ff7;
                  }
                }
               }
            }
            .item-name{
              color: #101010;
              margin-right: 10rpx;
            }
            /*.item-status{
              &.color-green{
                color: #45C861;
              }
              &.color-grey{
                color: #6C6C6C;
              }
            }*/
            .item-content,.item-time{
              color: #9A9A9A;
              margin-bottom: 5rpx;
            }
          }
          &.default{
            color: #2882FE;
          }
          &.danger{
            color: #f31f00;
          }
          &.normal{
            color: #45C861;

          }
        }
      }
      .approve-wrap,.reply-wrap{
        padding: 20rpx 0;
        .apr-top{
          display: flex;
          font-size: 24rpx;
          align-items: center;
          padding-bottom: 10rpx;
          & > text{
            color: #9A9A9A;
          }
          & > .apr-btn{
            width: 88rpx;
            height: 44rpx;
            -webkit-border-radius: 8rpx;
            -moz-border-radius: 8rpx;
            border-radius: 8rpx;
            border: 2rpx solid #cecece;
            color: #CECECE;
            text-align: center;
            line-height: 44rpx;
            & + .apr-btn{
              margin-left: 20rpx;
            }
            &.active{
              &.agree{
                color: #45C861;
                border-color: #45C861;
                background: #d4fddc;
              }
              &.disagree{
                color: #f31f00;
                border-color: #f31f00;
                background: #FEE1DD;
              }
            }

          }
        }
        .input-wrap{
          border: 2rpx solid #efefef;
          background: #ffffff;
          padding: 10rpx;
          border-radius: 8rpx 8rpx 0 0;
          font-size: 24rpx;
          & > textarea{
            width: 100%;
            height: 150rpx;
          }
        }
        .btn-wrap{
          background: #EFEFEF;
          border-radius: 0 0 8rpx 8rpx;
          height: 54rpx;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding: 0 20rpx;
          .btn{
            color: #ffffff;
            border-radius: 6rpx;
            background: #166fFF;
            font-size: 24rpx;
            height: 44rpx;
            width: 90rpx;
            line-height: 48rpx;
            text-align: center;
          }
        }
      }

      .follow-file{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .file-wrap{
          display: flex;
          align-items: center;
          height: 90rpx;
          .file{
            display: flex;
            align-items: center;
            width: fit-content;
            min-width: fit-content;
            height: 56rpx;
            margin: 0 16rpx;
            border: 2rpx solid #CCCCCC;
            border-radius: 6rpx;
            font-size: 26rpx;
            .icon-file1{
              font-size: 44rpx;
              color: #ffe36c;
            }
            .icon{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 48rpx;
              height: 100%;
              font-size: 32rpx;
            }
          }
        }
        .img-wrap{
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 96rpx;
          height: 90rpx;
          .img{
            width: 64rpx;
            height: 64rpx;
          }
          .icon{
            position: absolute;
            top: -10rpx;
            left: 100%;
            transform: translate(-100%, 0%);
            font-size: 36rpx;
            color: gray;
            opacity: 0.8;
          }
        }
      }
      .follow-info{
        padding: 10rpx 0 20rpx;
        .info-li{
          display: flex;
          margin-top: 10rpx;
          .info-item{
            color: #9A9A9A;
            & > i{
              margin-right: 10rpx;
            }
            & > text{
              font-size: 24rpx;
              &+text{
                margin-left: 18rpx;
              }
            }
            & +.info-item{
              margin-left: 100rpx;
            }
          }
        }
      }
    }
    .li-main{
      background: #ffffff;

    }
    .li-bot{
      display: flex;
      justify-content: space-between;
      //border-top: 2rpx solid #e6e6e6;
      padding: 10rpx 20rpx 20rpx;
      background: #ffffff;
      margin-top: 20rpx;
      .bot-left{
        display: flex;
      }
      .follow-button{
        position: relative;
        display: flex;
        align-items: flex-end;
        padding: 14rpx 20rpx 0;
        & > .iconfont{
          font-size: 40rpx;
        }
        & > text{
          font-size: 24rpx;
        }
        & > .badge{
          position: absolute;
          top: 0;
          color: #f31f00;
          font-size: 24rpx;
          left: 58rpx;
        }
        .switch-content{
          height: fit-content;
        }
        &.active{
          color: #0251FF;
        }
      }
      .approve-button{
        padding-top: 10rpx;
        display: flex;
        align-items: center;
        font-size: 24rpx;
        & > text{
          margin-left: 10rpx;
        }
        &.active{
          color: #0251FF;
        }
      }
    }
  }
}

.hidden{
  display: none !important;
}
